<template>
    <div class="Activity" ref="activity" @scroll="binScroll">
        <div class="notice" ref="notice">
            <van-notice-bar  left-icon="volume-o" background="rgb(225, 225, 225)" :scrollable="false">
                <van-swipe
                    vertical
                    class="notice-swipe"
                    :autoplay="3000"
                    :show-indicators="false"
                >
                    <van-swipe-item v-for="(item,i) in banner" :key="i">{{item.nickname}} 刚参加了活动 {{item.name}}</van-swipe-item>
                </van-swipe>
            </van-notice-bar>
        </div>
        <div class="content" ref="content">
            <div class="remenTitle">热门活动上线中</div>
            <div class="activityItem" v-for="(item,i) in ongoing" :key="i+'a'">
                
                <div class="remen" @click="toactivity(item.url,item.name)">
                    <img :src="item.image" alt="">
                    <div class="remenCont">
                        <div class="left">{{item.name}}</div>
                        <div class="right">查看详情 &gt;</div>
                    </div>
                </div>
            </div>


            <div class="remenTitle">往期回顾</div>
            <div class="activityItem" v-for="(item,i) in ended" :key="i">
                <div class="remen" @click="toactivity(item.url,item.name)">
                    <img :src="item.image" alt="">
                    <div class="remenCont">
                        <div class="left">{{item.name}}</div>
                        <div class="right">查看详情 &gt;</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'Activity',
        data() {
            return {
                banner:[],
                ongoing:[],
                ended:[],
                timer:0
            }
        },
        async created(){
            await this.axios.get('https://apis.netstart.cn/douguo/home/events/getlists?offset=0limit=10'). then((response) => {
                if (response.data.status=== "OK") {
                    this.banner = response.data.data.banner
                    this.ongoing = response.data.data.ongoing.events
                    this.ended = response.data.data.ended.events
                }
            })
        },
        methods:{
            binScroll(){
                let length = this.ended.length
                clearTimeout(this.timer)
                this.timer = setTimeout(()=>{
                    if (this.$refs.notice.scrollHeight+this.$refs.content.scrollHeight-this.$refs.activity.scrollTop===this.$refs.activity.clientHeight) {
                        this.axios.get(`https://apis.netstart.cn/douguo/home/events/getlists?offset=${length}limit=10`). then((response) => {
                        this.ended.push(...response.data.data.ended.events) 
                        })
                    }
                },300)
            },
            toactivity(src,title){
                this.$router.push({ name: 'activityCont',query:{src,title}}) 
            }
        }
    }
</script>

<style lang="less" scoped>
     .notice-swipe {
        height: 40px;
        line-height: 40px;
        .sitem{
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: 90%;
        }
    }
    .Activity{
        width: 100%;
        height: calc(100vh - 100px);
        overflow: auto;
        padding: 0 20px;
        box-sizing: border-box;
        .notice{
            padding: 10px 0;
            border-radius: 8px;
            overflow: hidden;
        }
        .activityItem{
            padding-block: 10px 0;
            // margin-bottom: 20px;
            .remen{
                width: 100%;
                img{
                    border-radius: 5px;
                }
                .remenCont{
                    margin-top: 10px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .left{
                        width: 75%;
                        font-weight: 600;
                    }
                    .right{
                        color: #50969F;
                        font-weight: 600;
                    }
                }
            }
        }
        .remenTitle{
            height: 20px;
            font-size: 16px;
            font-weight: 700;
            padding: 10px 0;
        }
    }
    img{
        width: 100%;
    }
</style>